<template>
    <a-row :gutter="24">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-card :bordered="false" style="margin-bottom: 10px">
                <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form"
                    :model="searchFormState">
                    <a-row :gutter="24">
                        <a-col :span="8">
                            <a-form-item name="searchKey" label="项目名称">
                                <a-input-search v-model:value="searchFormState.proName" style="width: 100%"
                                    placeholder="选择的项目" @click="onSearch" @search="onSearch" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-button type="primary" :disabled="!searchFormState.proId" @click="loadData()"
                                class="mr-2">
                                查询
                            </a-button>
                            <a-button class="snowy-buttom-left" @click="reset">
                                重置
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
            <a-card :bordered="false">
                <!-- :dataSource="dataSoure" -->
                <s-table ref="tableRef" :columns="columns" :data="loadData" :expand-row-by-click="true"
                    :alert="options.alert.show" bordered :row-key="(record) => record.id"
                    :row-selection="options.rowSelection" :defaultExpandAllRows="true">

                    <template #operator class="table-operator">
                        <a-space>
                            <a-button type="primary" :disabled="!searchFormState.proId" @click="onOpen()">
                                <template #icon><plus-outlined /></template>
                                新增
                            </a-button>
                        </a-space>
                    </template>
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'action'">
                            <div style="text-align: left;">
                                <a @click="onOpen(record)">编辑</a>
                                <a-divider type="vertical" />
                                <a-popconfirm title="确定删除此数据源？" v-if="!record.children" @confirm="remove(record)">
                                    <a-button type="link" danger size="small">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                    </template>
                </s-table>
            </a-card>
        </a-col>
    </a-row>
    <a-drawer v-model:visible="visible" style="color: red" :title="form.id ? '编辑分类' : '添加分类'" placement="right"
        :style="{ position: 'absolute' }" :footer-style="{ textAlign: 'right' }">
        <a-form @finish="handleFinish" :model="form" ref="formRef" name="basic" :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }" autocomplete="off">

            <a-form-item label="项目名称" name="proName">
                <a-input v-model:value="form.proName" disabled style="width: 100%" placeholder="请输入项目名称" />
            </a-form-item>


            <a-form-item label="上级分类" name="parentId" :rules="[{ required: true }]">
                <a-tree-select v-model:value="form.parentId" style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择分类" allow-clear
                    tree-default-expand-all :tree-data="dataSoure" :defaultExpandAllRows="true" :field-names="{
        children: 'children',
        label: 'name',
        value: 'id'
    }" selectable="false" tree-line></a-tree-select>
            </a-form-item>

            <a-form-item label="分类名称" name="name" :rules="[{ required: true }]">
                <a-input v-model:value="form.name" :disabled="disabled" style="width: 100%" placeholder="" />
            </a-form-item>

            <a-form-item label="排序码" name="sortCode" :rules="[{ required: true }]">
                <a-input v-model:value="form.sortCode" :disabled="disabled" style="width: 100%" placeholder="" />
            </a-form-item>


        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
        </template>
    </a-drawer>
    <projectSelection ref="proSelect" @onClose="prSelectOk"  />

</template>

<script setup>
import api from '@/api/datacenter/index'
import projectSelection from '@/components/pm/projectSelection.vue'
const expandedKeys = ref(['0-0']);
const selectedKeys = ref([]);
const selectedRowKeys = ref([])
const visible = ref(false)
const tableKey = ref("key0")
// 列表选择配置
const options = {
    alert: {
        show: false,
        clear: () => {
            selectedRowKeys.value = ref([])
        }
    },
    rowSelection: {
        onChange: (selectedRowKey, selectedRows) => {
            selectedRowKeys.value = selectedRowKey
        }
    }
}
const submitLoading = ref(false)
const dataSoure = ref([])
const columns = [
    {
        title: '分类名称',
        dataIndex: 'name',

    },
    {
        title: '排序',
        dataIndex: 'sortCode',
        width: 100,
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '120px',
        align: 'center',
    }
]
const form = ref({})

// 定义tableDOM
const tableRef = ref(null)
const formRef = ref()
const searchFormRef = ref()
const searchFormState = ref({})
const onOpen = (record) => {
    visible.value = true
    if (record) {
        form.value = record

    } else {
        form.value = {}
    }
    form.value.proId = searchFormState.value.proId
    form.value.proName = searchFormState.value.proName
}
const loadData = async () => {
    if (!searchFormState.value.proId) {

        return;
    }
    return api.tree({ "proid": searchFormState.value.proId }).then((res) => {
        // var data = { "code": 200, "msg": "操作成功", "data": [{ "id": "1763153679188819970", "parentId": "123", "weight": 1, "name": "项目立项", "children": [{ "id": "1763153961742303233", "parentId": "1763153679188819970", "weight": 1, "name": "设计图纸" }, { "id": "1763154013927833601", "parentId": "1763153679188819970", "weight": 2, "name": "投标文件" }, { "id": "1763154093015629826", "parentId": "1763153679188819970", "weight": 3, "name": "预算书", "children": [{ "id": "1763857221910355970", "parentId": "1763154093015629826", "weight": 1, "name": "EP环境手册" }] }] }] }
        dataSoure.value = [
            {
                "id": "0",
                "parentId": "0",
                "weight": 1,
                "name": "顶级",
                "children": res
            }
        ]
        tableKey.value += 1;
        if (!res) {
            return []
        }
        return {
            "records": res,
            "total": res.length,
            "size": res.length,
            "current": 1,
            "orders": [],
            "optimizeCountSql": true,
            "searchCount": true,
            "maxLimit": null,
            "countId": null,
            "pages": 1
        };
    })
}
const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    searchFormState.value.proId = selectRecords[0].id
    searchFormState.value.proName = selectRecords[0].name
    tableRef.value.refresh(true)
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
}
const onClose = () => {
    visible.value = false

}
const onSubmit = () => {
    submitLoading.value = true
    if (!form.value.id) {
        api.add(form.value).then(res => {
            tableRef.value.refresh(true)
            submitLoading.value = false
        })
    } else {
        api.edit(form.value).then(res => {
            tableRef.value.refresh(true)
            submitLoading.value = false
        })
    }
    visible.value = false
}
// 重置
const reset = () => {
    searchFormRef.value.resetFields()
    tableRef.value.refresh(true)
}
const remove = (record) => {
    api.delete([{ "id": record.id }]).then(() => {
        tableRef.value.refresh(true)
    })
}

const setDefaultValue = () => {
    console.log("setDefaultValue")
    proSelect.value.getDefaultValue().then(records => {
        console.log("default", records)
        if (records) {
            searchFormState.value.proId = records[0].id
            searchFormState.value.proName = records[0].name
            tableRef.value.refresh(true)
            form.value.proId = records[0].id
            form.value.proName = records[0].name
        }
    })
}
nextTick(() => {
    setDefaultValue();
})

</script>